<!--
 * @Author: Yang-jiahao yangjiahao717@126.com
 * @Date: 2024-01-12 17:40:54
 * @LastEditors: Yang-jiahao yangjiahao717@126.com
 * @LastEditTime: 2024-01-17 16:48:25
 * @FilePath: \HarmonyOS移动应用开发coded:\yjh\huaweiDemo\ZH\localhost.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导航页面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #container {
      width: 100%;
      height: 100vh;
    }
  </style>
  <!--这个秘钥应该从接口拿去 现在没有接口 所以直接提供 -->
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: 'd8443a32e231f6149cb87ee4f66d9867',
    }
  </script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=debdafb3de6c9461f3ed9a7092f076df"></script>
</head>

<body>
  <!-- 创建一个h5的地图页面放入高德地图 -->
  <div id="container"></div>
  <script>
    var map = new AMap.Map("container", {
      zoom: 15, //级别
      center: [116.39702606201172, 39.91805648803711], //中心点坐标
    })

    var h5Port
    window.addEventListener("message", function (event)
    {
      if (event.data == 'webApi') {
        h5Port = event.ports[0]
        h5Port.postMessage('你好高德地图~')
      }

    })

    // window.onload = function ()
    // {
    //   getLocation(116.343699, 40.060499)
    // }
    // function getLocation (lon, lat)
    // {
    //   map.setZoomAndCenter(18, [lon, lat])
    //   alert(lon + '-' + lat)
    //   map.plugin(["AMap.PlaceSearch"], function ()
    //   {
    //     var MSearch = new AMap.PlaceSearch({
    //       pageSize: 4,
    //       pageIndex: 1, //请求页码，默认1
    //       extensions: "base", //返回信息详略，默认为base（基本信息）
    //     }) //构造PlaceSearch类
    //     AMap.event.addListener(MSearch, "complete", (result) =>
    //     {
    //       alert(JSON.stringify(result))
    //     }) //返回结果
    //     MSearch.searchNearBy("地点", new AMap.LngLat(lon, lat)) //关键字查询
    //   })
    // }


  </script>
</body>

</html>